import React, { useState, useEffect } from 'react';
import { Link, Outlet, useNavigate, useLocation } from 'umi';
import { Button, Menu, Modal } from 'antd';
import { CaretRightOutlined, UnorderedListOutlined, LogoutOutlined, StopOutlined, PauseOutlined, QrcodeOutlined, SettingOutlined } from '@ant-design/icons';
import './index.less';

function getItem(label, key, icon) {
    return {
        key,
        label: (
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                {icon}
                <span>{label}</span>
            </div>
        ),
    };
}

const items = [
    getItem('使用说明', '/useDirections', <UnorderedListOutlined />),
    getItem('信息展示', '/informationDisplay', <QrcodeOutlined />),
    getItem('设置', '/settings', <SettingOutlined />),
];

export default function Layout() {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [isStarted, setIsStarted] = useState(false);
    const [isPaused, setIsPaused] = useState(false);
    const [isStopping, setIsStopping] = useState(false);
    const navigate = useNavigate();
    const location = useLocation();

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
        setIsStarted(true);
        navigate('/informationDisplay'); // 添加跳转逻辑
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    const handlePause = () => {
        setIsPaused(true);
    };

    const handleResume = () => {
        setIsPaused(false);
    };

    const showStopModal = () => {
        setIsStopping(true);
    };

    const handleStopOk = () => {
        setIsStopping(false);
        setIsStarted(false);
        setIsPaused(false);
    };

    const handleStopCancel = () => {
        setIsStopping(false);
    };

    const select = ({ item, key, keyPath, domEvent }) => {
        navigate(key);
    };

    return (
        <div className="main">
            <div className="menu">
                <div>
                    {isStarted ? (
                        <div style={{ display: 'flex', flexDirection: 'column' }}>
                            <Button
                                type="primary"
                                shape="circle"
                                size="large"
                                icon={<StopOutlined />}
                                className="button_stop"
                                onClick={showStopModal}
                            >
                            </Button>
                            <Button
                                type="primary"
                                shape="circle"
                                size="large"
                                icon={isPaused ? <CaretRightOutlined /> : <PauseOutlined />}
                                className="button_pause"
                                style={{ marginTop: 16 }}
                                onClick={isPaused ? handleResume : handlePause}
                            >
                            </Button>
                        </div>
                    ) : (
                        <Button
                            type="primary"
                            shape="circle"
                            size="large"
                            icon={<CaretRightOutlined />}
                            className="button_start"
                            onClick={showModal}
                        />
                    )}
                    <Menu
                        mode="inline"
                        items={items}
                        className="menu_container"
                        onClick={select}
                        selectedKeys={[location.pathname]} // 根据当前路由更新选中项
                    />
                </div>
                <Button
                    size="large"
                    icon={<LogoutOutlined />}
                    className="button_logout"
                >
                    退出
                </Button>

            </div>

            <div className='content'>

                <h1>
                    logo xxxxx系统
                </h1>
                <Outlet />
            </div>
            <Modal title="确认启动" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <p>确定要启动吗？</p>
            </Modal>
            <Modal title="确认终止" visible={isStopping} onOk={handleStopOk} onCancel={handleStopCancel}>
                <p>确定要终止吗？</p>
            </Modal>
        </div>
    );
}